<template>
	<span
		class="text-white inline-flex items-center gap-1 whitespace-nowrap cursor-pointer app-font-bold app-font-num w-full"
		@click="handleCasinoGameDetail">
		<!-- <base-image
			class="w-6 h-6"
			type="local"
			:name="value.icon"
			default="sports/team-home.svg"></base-image> -->
		<base-icon v-if="value?.icon" :name="value?.icon" class="mr-[2px]" size="14" />
		<span class="overflow-ellipsis overflow-hidden capitalize">{{ formatGameName() }}</span>
	</span>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { useAppStore } from '@/store'
import { LangGameFormat } from '@/enums'
const appStore = useAppStore()
const props = defineProps({
	value: {
		type: Object
	},
	src: {
		type: String,
		default: ''
	},
	currency: {
		type: String
	},
	currencyClass: {
		type: String
	},
	currencySymbol: {
		type: String,
		default: undefined
	},
	hideCurrency: {
		type: Boolean,
		default: false
	},
	precision: {
		type: [Number, String]
	},
	data: {
		type: Object
	}
})
const handleCasinoGameDetail = () => {
	appStore.setCasinoDetailVisible(true, props.data)
}
const formatGameName = () => {
	const game = props.value
	const formatLang = LangGameFormat[appStore.lang]

	let gameName = game?.entranceName[formatLang] || game?.gameName || ''
	return gameName.toLowerCase()
}
</script>
<style lang="scss" scoped></style>
